import Default from '../../../../../EWeb/layouts/default.vue';
<template>
  <orh-table reload @on-reload="reloadData" id="resultinquirys">
    <Row v-if="status" slot="table">
      <echarts :option="datas" style="width: 100%;height: 400px;margin-bottom: 50px;"></echarts>
    </Row>

    <Table border stripe :columns="columns" :data="data" :loading="tableload" slot="table"></Table>
  </orh-table>
</template>
                
<script>
const Echarts = () =>
  import("~/components/Public/Echarts").then(m => m.default || m);
export default {
  components: {
    Echarts
  },
  data() {
    return {
      status: false,
      tableload: true,
      data: [],
      columns: [],

      datas: {
        title: {
          text: "我的教务值班数据统计"
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "值班次数",
            type: "bar",
            barWidth: "60%",
            data: []
          }
        ]
      },

      url: "api/watchlist/v1/watchlistfrostatistics/userindexcont"
    };
  },
  methods: {
    // ==================================================
    // 刷新
    // ==================================================
    reloadData() {
      this.data = [];
      this.columns = [];
      this.datas.xAxis[0].data = [];
      this.datas.series[0].data = [];
      this.tableload = true;
      this.status = false;
      this.queryData();
    },

    // ==================================================
    // 请求数据
    // ==================================================
    queryData(index) {
      this.$http
        .get(this.url)
        .then(val => {
          this.data = [
            {
              data: []
            }
          ];
          val.data.forEach(this.handelData);
          this.tableload = false;
          this.status = true;
        })
        .catch(err => {
          if (err.code && err.code == 422) {
            this.$Message.error(err.message);
          }
        });
    },
    handelData(item, index) {
      this.datas.xAxis[0].data.push(item.watchlist_name.zh);
      this.datas.series[0].data.push(item.cont);

      this.columns.push({
        minWidth: 150,
        align: "center",
        value: item.watchlist_id,
        renderHeader: (h, params) => {
          return h(
            "div",
            {
              style: {
                width: "100%",
                height: "80px"
              }
            },
            [
              h(
                "div",
                {
                  style: {
                    width: "100%",
                    height: "50%",
                    borderBottom: "1px solid #e9eaec",
                    display: "flex",
                    lineHeight: "40px",
                    justifyContent: "center"
                  }
                },
                item.watchlist_name.zh
              ),
              h(
                "div",
                {
                  style: {
                    width: "100%",
                    height: "50%",
                    display: "flex"
                  }
                },
                [
                  h(
                    "div",
                    {
                      style: {
                        borderRight: "1px solid #e9eaec",
                        height: "100%",
                        flex: "1",
                        lineHeight: "40px"
                      }
                    },
                    "加分"
                  ),
                  h(
                    "div",
                    {
                      style: {
                        borderRight: "1px solid #e9eaec",
                        height: "100%",
                        flex: "1",
                        lineHeight: "40px"
                      }
                    },
                    "减分"
                  ),
                  h(
                    "div",
                    {
                      style: {
                        height: "100%",
                        flex: "1",
                        lineHeight: "40px"
                      }
                    },
                    "总统计"
                  )
                ]
              )
            ]
          );
        },
        render: (h, params) => {
          const name = params.row.data.find(
            iten => iten.watchlist_id == params.column.value
          );
          const str1 = name.plus;
          const str2 = name.reduce;
          const str3 = name.cont;
          return h(
            "div",
            {
              style: {
                width: "100%",
                height: "100%",
                display: "flex",
                lineHeight: "48px"
              }
            },
            [
              h(
                "div",
                {
                  style: {
                    borderRight: "1px solid #e9eaec",
                    flex: "1"
                  }
                },
                str1
              ),
              h(
                "div",
                {
                  style: {
                    borderRight: "1px solid #e9eaec",
                    flex: "1"
                  }
                },
                str2
              ),
              h(
                "div",
                {
                  style: {
                    flex: "1"
                  }
                },
                str3
              )
            ]
          );
        }
      });

      this.data[0].data.push(item);
    }
  },
  mounted() {},
  created() {
    this.reloadData();
  }
};
</script>
<style>
#resultinquirys .ivu-table-cell {
  padding: 0;
  width: 100%;
}
</style>

